<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bod y{
				height: 10000000px;
				background-image: url(img/猫和老鼠.png);
                background-size: contain;
				/* 函数 cover 等比例放大图片 特点：图片按照比例放大存背景空间
				     【开发者：背景图大小是否等于背景空间】
				     contain 等比例缩放图片 特点：图片按照比例缩放存背景空间
					 【开发者：背景图等比例显示在背景空间】
					 */
				/* 背景附件--尺寸中存在cover或者contain */
				background-attachment: fixed; /* 背景图固定   scroll 不固定 */
			}
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #ffff00;
				background-image: url(img/猫和老鼠.png);
				/* 问题：超大图-不显示  小图-显示
				 注意：北京空间大小，如果图小于背景空间--平铺
				 */
				background-repeat: no-repeat;
				/* no-repeat不平铺  repeat-x，y 横，纵向平铺 */
				background-size: 30%;
				/* 背景尺寸属性值：数值px % |函数 cover contain */
				/* 背景定位：背景空间一定大于背景图 关键字：center、left、right、top、bottem */
				background-position: 80% 0;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas exercitationem, provident deserunt, tempore aspernatur explicabo hic consequuntur cupiditate distinctio quod ipsa soluta nobis nesciunt dolorum, aliquam dignissimos quasi odio dolore!
		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit inventore provident sapiente tenetur excepturi quis nobis. Ad eius, sint assumenda aut a repellendus ratione voluptate voluptatum hic commodi. Maiores, nam.
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae enim deleniti expedita. Accusamus fuga magnam, corporis, eaque, provident doloribus repellendus quo consequatur quas explicabo nobis magni quos quasi illum dolores?
		<!--html img图片  引入一张图片，位置不可随意改变  
			 css  背景图片 引入一张图片，位置可以随意改变
			  子属性 background-color 背景颜色
			        background-image  背景图
					background-repeat
					background-size
					background-attachment
					background-position
			  复合属性 background: background-image  background-color  background-position 
			                      background-size  background-repeat和background-attachemt
								  
			  简写属性：background：background-image background-position|background-size
			  替换子属性：background-image  background-color background-repeat
			  -->
		<div></div>
	</body>
</html>